<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Vector Drawer</title>
    <style>
        svg {
            background-color: white;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<svg id="drawingPane" width="600" height="400"></svg>
<script>
    function drawTriangleAndVector(svg, centerX, centerY, sideLength, vector, name, resultLength, azimuth, scale, isClockwise) {
        const height = Math.sqrt(3) / 2 * sideLength;
        const halfSide = sideLength / 2;

        const x1 = centerX;
        const y1 = centerY - (2.0 / 3.0) * height;
        const x2 = centerX - halfSide;
        const y2 = centerY + (1.0 / 3.0) * height;
        const x3 = centerX + halfSide;
        const y3 = centerY + (1.0 / 3.0) * height;

        const radians = azimuth * Math.PI / 180;
        const cosAngle = Math.cos(radians);
        const sinAngle = Math.sin(radians);

        const rotatedX = [0, 0, 0];
        const rotatedY = [0, 0, 0];
        const originalX = [x1, x2, x3];
        const originalY = [y1, y2, y3];

        for (let i = 0; i < 3; i++) {
            rotatedX[i] = centerX + (originalX[i] - centerX) * cosAngle - (originalY[i] - centerY) * sinAngle;
            rotatedY[i] = centerY + (originalX[i] - centerX) * sinAngle + (originalY[i] - centerY) * cosAngle;
        }

        drawTriangle(svg, rotatedX, rotatedY);
        addPerpendiculars(svg, rotatedX, rotatedY, isClockwise);
        drawVector(svg, centerX, centerY, vector, name, resultLength, radians, scale);
    }

    function drawTriangle(svg, x, y) {
        const points = `${x[0]},${y[0]} ${x[1]},${y[1]} ${x[2]},${y[2]}`;
        const triangle = document.createElementNS("http://www.w3.org/2000/svg", "polygon");
        triangle.setAttribute("points", points);
        triangle.setAttribute("stroke", "black");
        triangle.setAttribute("fill", "transparent");
        svg.appendChild(triangle);
    }

    function addPerpendiculars(svg, x, y, isClockwise) {
        const labels = isClockwise ? ["ОП2", "ОП1", "ОП3"] : ["ОП3", "ОП1", "ОП2"];
        const offset = 1; // Смещение текста

        for (let i = 0; i < 3; i++) {
            const j = (i + 1) % 3;
            const midX = (x[i] + x[j]) / 2;
            const midY = (y[i] + y[j]) / 2;
            const dx = y[j] - y[i];
            const dy = x[i] - x[j];
            const length = 20.0 / Math.sqrt(dx * dx + dy * dy); // Увеличиваем длину перпендикуляра до 20 пикселей
            const perpX = midX - dx * length;
            const perpY = midY - dy * length;

            const perpendicular = document.createElementNS("http://www.w3.org/2000/svg", "line");
            perpendicular.setAttribute("x1", midX);
            perpendicular.setAttribute("y1", midY);
            perpendicular.setAttribute("x2", perpX);
            perpendicular.setAttribute("y2", perpY);
            perpendicular.setAttribute("stroke", "lightgray");
            svg.appendChild(perpendicular);

            const textXOffset = (perpX - midX) * offset;
            const textYOffset = (perpY - midY) * offset;

            const label = document.createElementNS("http://www.w3.org/2000/svg", "text");
            label.setAttribute("x", perpX + textXOffset);
            label.setAttribute("y", perpY + textYOffset);
            label.setAttribute("fill", "lightgray");
            label.textContent = labels[i];
            svg.appendChild(label);
        }
    }

    function drawVector(svg, centerX, centerY, vector, name, resultLength, radians, scale) {
        const vectorEndX = centerX + vector[0] * scale;
        const vectorEndY = centerY - vector[1] * scale;

        const cosAngle = Math.cos(radians);
        const sinAngle = Math.sin(radians);

        const rotatedEndX = centerX + (vectorEndX - centerX) * cosAngle - (vectorEndY - centerY) * sinAngle;
        const rotatedEndY = centerY + (vectorEndX - centerX) * sinAngle + (vectorEndY - centerY) * cosAngle;

        const resultVectorLine = document.createElementNS("http://www.w3.org/2000/svg", "line");
        resultVectorLine.setAttribute("x1", centerX);
        resultVectorLine.setAttribute("y1", centerY);
        resultVectorLine.setAttribute("x2", rotatedEndX);
        resultVectorLine.setAttribute("y2", rotatedEndY);
        resultVectorLine.setAttribute("stroke", "red");
        resultVectorLine.setAttribute("stroke-width", 2);
        svg.appendChild(resultVectorLine);

        const arrowLength = 10;
        const arrowAngle = Math.PI / 9; // 20 градусов

        const lineAngle = Math.atan2(rotatedEndY - centerY, rotatedEndX - centerX);

        const arrowX1 = rotatedEndX - arrowLength * Math.cos(lineAngle - arrowAngle);
        const arrowY1 = rotatedEndY - arrowLength * Math.sin(lineAngle - arrowAngle);
        const arrowX2 = rotatedEndX - arrowLength * Math.cos(lineAngle + arrowAngle);
        const arrowY2 = rotatedEndY - arrowLength * Math.sin(lineAngle + arrowAngle);

        const arrow1 = document.createElementNS("http://www.w3.org/2000/svg", "line");
        arrow1.setAttribute("x1", rotatedEndX);
        arrow1.setAttribute("y1", rotatedEndY);
        arrow1.setAttribute("x2", arrowX1);
        arrow1.setAttribute("y2", arrowY1);
        arrow1.setAttribute("stroke", "red");
        arrow1.setAttribute("stroke-width", 2);
        svg.appendChild(arrow1);

        const arrow2 = document.createElementNS("http://www.w3.org/2000/svg", "line");
        arrow2.setAttribute("x1", rotatedEndX);
        arrow2.setAttribute("y1", rotatedEndY);
        arrow2.setAttribute("x2", arrowX2);
        arrow2.setAttribute("y2", arrowY2);
        arrow2.setAttribute("stroke", "red");
        arrow2.setAttribute("stroke-width", 2);
        svg.appendChild(arrow2);

        const vectorLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
        vectorLabel.setAttribute("x", centerX - 30);
        vectorLabel.setAttribute("y", centerY - 100);
        vectorLabel.setAttribute("fill", "black");
        vectorLabel.textContent = `отм + ${parseFloat(name).toFixed(3)} м`;
        svg.appendChild(vectorLabel);

        const resultLabel = document.createElementNS("http://www.w3.org/2000/svg", "text");
        resultLabel.setAttribute("x", rotatedEndX + 10);
        resultLabel.setAttribute("y", rotatedEndY);
        resultLabel.setAttribute("fill", "red");
        resultLabel.textContent = `${resultLength.toFixed(2)} мм`;
        svg.appendChild(resultLabel);
    }

    const svg = document.getElementById("drawingPane");
    const centerX = 300;
    const centerY = 200;
    const sideLength = 150;
    const vector = [100, 50];
    const name = "10";
    const resultLength = 111.8;
    const azimuth = 30;
    const scale = 0.5;
    const isClockwise = true;

    drawTriangleAndVector(svg, centerX, centerY, sideLength, vector, name, resultLength, azimuth, scale, isClockwise);
</script>
</body>
</html>
